<template>
  <div id="app">
    <el-container style="border: 1px solid #eee">
      <el-header style=" font-size: 12px">
        <el-col :span="8" style="text-align:left;"><span @click="asideTF('nav')"><img src="./nav.png" alt="" width="12"></span></el-col>
        <el-col :span="8" style="text-align:center;"><span>{{title}}</span></el-col>
        <el-col :span="8" style="text-align: right;">
          <span >admmin</span>
        </el-col>

      </el-header>
      <el-container style="position: relative; border: 1px solid #eee;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;">
        <div class="asidebg" v-show="asideShow"  @click="asideTF('nav')"></div>
        <el-aside v-show="asideShow"  style="overflow-x:hidden;text-align: left; background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1','2','3']">
            <el-submenu   index="1">
              <template slot="title">客户管理</template>
              <router-link  :to="{name:'CustomerInfo'}">
                <el-menu-item index="1-1" @click="asideTF(titleList[0])" >客户信息</el-menu-item>
              </router-link>
              <router-link :to="{name:'Contacts'}">
                <el-menu-item index="1-2" @click="asideTF(titleList[1])" >我的联系人</el-menu-item>
              </router-link>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">合同管理</template>
                <router-link :to="{name:'ContractInfo'}">
                  <el-menu-item index="2-1" @click="asideTF(titleList[2])" >合同基本信息</el-menu-item>
                </router-link>
                <router-link :to="{name:'DeviceMatching'}">
                  <el-menu-item index="2-2" @click="asideTF(titleList[3])" >设备匹配</el-menu-item>
                </router-link>
                <router-link :to="{name:'DeliverGoodsHistory'}">
                  <el-menu-item index="2-3" @click="asideTF(titleList[4])" >发货信息 </el-menu-item>
                </router-link>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">产品管理</template>

                <router-link :to="{name:'HLProductINfo'}">
                  <el-menu-item index="3-1" @click="asideTF(titleList[5])" >产品信息 </el-menu-item>
                </router-link>


                <router-link :to="{name:'HLQualityTesting'}">
                  <el-menu-item index="3-2" @click="asideTF(titleList[6])" >质检</el-menu-item>
                </router-link>

            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main style="height: 100%;">
            <router-view></router-view>
            <!--<el-table :data="tableData">-->
            <!--<el-table-column prop="date" label="日期" width="140">-->
            <!--</el-table-column>-->
            <!--<el-table-column prop="name" label="姓名" width="120">-->
            <!--</el-table-column>-->
            <!--<el-table-column prop="address" label="地址">-->
            <!--</el-table-column>-->
            <!--</el-table>-->
          </el-main>
        </el-container>

      </el-container>
    </el-container>
  </div>
</template>

<script>
  // import header from 'components/header/header'

  const asideShow = false;

  export default {
    name: 'app',
    components: {
      // 'v-header':header
    },
    methods:{
      asideTF(title) {
        this.asideShow = this.asideShow==true ? false :true ;
        if (title!=='nav'){
          this.title=title;
        }

      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        console.log(scrollTop)
      }
    },
    data() {
      const titleList=['客户信息','我的联系人','合同基本信息','设备匹配','发货信息','产品信息','质检'];
      return {
        title:'HLOA',
        asideShow,
        titleList
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    }
  }

</script>

<style>
  html,body{height:100%;}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
}


.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
  position: absolute;
  height: 100%;
  z-index: 10;
  top: 0px;
  width: 80%;
}
  .asidebg{
    width: 100%;
    position: absolute;
    height: 100%;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
  }

</style>
